/**
 * Created by huotaol on 2017/5/11.
 */
import React, {Component} from "react";
import PropTypes from "prop-types";
import {ListView, Text, View} from "react-native";
import CustomStyle from "../../../common/style/CustomStyle";
import {connect} from "react-redux";
import ModuleCommonHeader from "../../main/module/ModuleCommonHeader";


const DATA_SOURCE = new ListView.DataSource({
    rowHasChanged: (r1, r2) => r1 !== r2,
    sectionHeaderHasChanged: (s1, s2) => s1 !== s2
});
class AllParam extends Component {
    static propTypes = {
        carInfo: PropTypes.object,
    };

    // 构造
    constructor(props) {
        super(props);
        // 初始状态
        this.state = {data: {}};
    }

    componentDidMount() {
        const carInfo = this.props.carInfo;
        const basic = [];
        basic.push({name: '车身颜色', value: carInfo.color});
        basic.push({name: '表征里程（万公里）', value: carInfo.meter});
        basic.push({name: '燃油标号', value: carInfo.fueLabel});
        basic.push({name: '排量（L）', value: carInfo.displacement});
        basic.push({name: '缸数', value: carInfo.cylinder});
        basic.push({name: '发动机功率（KW）', value: carInfo.power});
        basic.push({name: '排放标准', value: carInfo.ces});
        basic.push({name: '变速器形式', value: carInfo.gearBox});
        basic.push({name: '安全气囊', value: carInfo.airBag});
        basic.push({name: '驱动方式', value: carInfo.drive});
        basic.push({name: 'ABS', value: carInfo.abs});
        basic.push({name: '轮毂材质', value: carInfo.hub});

        const other = carInfo.other.map(item => ({
            name: item
        }));

        const data = {'基本参数': basic, '其他重要参数': other};
        this.setState({data: data});
    }

    render() {
        return (
            <View >
                <ModuleCommonHeader title="全部参数"/>
                <ListView
                    renderSectionHeader={this._renderSectionHeader}
                    dataSource={DATA_SOURCE.cloneWithRowsAndSections(this.state.data)}
                    renderSeparator={this._renderSeparator}
                    renderRow={this._renderRow}/>
            </View>
        );
    }

    _renderRow(data) {
        return <View style={{
            height: CustomStyle.getActualSizeInVertical(78),
            flexDirection: 'row',
            alignItems: 'center',
            paddingLeft: CustomStyle.getActualSizeInHorizontal(48),
            paddingRight: CustomStyle.getActualSizeInHorizontal(30),
            justifyContent: 'space-between',
        }}>
            <Text style={[CustomStyle.baseText, {
                fontSize: CustomStyle.getActualFontSize(30),
                color: '#857e6e',
            }]}>{data.name}</Text>
            <Text style={[CustomStyle.baseText, {
                fontSize: CustomStyle.getActualFontSize(30),
                color: '#4a3d18',
            }]}>{data.value}</Text>
        </View>
    }

    _renderSectionHeader(sectionData, sectionID) {
        return <View style={{
            flexDirection: 'row',
            backgroundColor: '#fff8d5',
            alignItems: 'center',
            paddingLeft: CustomStyle.getActualSizeInHorizontal(20),
            height: CustomStyle.getActualSizeInVertical(68),
        }}>
            <View style={{
                width: CustomStyle.getActualSizeInHorizontal(8),
                height: CustomStyle.getActualSizeInVertical(28),
                backgroundColor: '#ffc000',
            }}/>
            <Text style={[CustomStyle.baseText, {
                fontSize: CustomStyle.getActualFontSize(30),
                color: '#4a3d18',
                marginLeft: CustomStyle.getActualSizeInHorizontal(20),
            }]}>{sectionID}</Text>
        </View>;
    }

    _renderSeparator() {
        return <View style={[CustomStyle.separator]}>

        </View>
    }
}

export default connect()(AllParam);